import styled from 'styled-components'
import border from 'components/styled/border'

export const HomeWrap=styled.div`
height:100%;
`

export const Headwrap=styled.header`
 display:flex;
 flex-direction:row;
 font-size:0.16rem;
 color:#383838;
 height: 0.5rem;
 align-items:center;
 background:white;
 .head-left{
     height: 100%;
     padding:0.15rem 0.1rem 0.11rem 0.15rem;
}
 h2{
     flex:1;
     text-align:center;
     font-size:0.17rem;
     color:#383838;
}
 .head-right{
     span:first-child{
         padding:0 0.15rem;
         line-height:0.5rem;
    }
     span:last-child{
         display:inline-block;
         padding:0 0.1rem 0 0;
    }
}
`
export const MainWrap=styled.main`
height:100%;
overflow: hidden;
`
export const NavWrap=styled.div`
     background:white;
     height: 1.6rem;
     padding-top:.1rem;
     font-size:.12rem;
     ul{
         display: flex;
         flex-direction:row;
         flex-wrap:wrap;
          li {
         width:25%;
         text-align:center;
         margin-top:.1rem;
         img{
             width:.4rem;
             height: .4rem;
         }
         p{
             margin-top:.03rem
         }
      }
     }   
`
export const HotWrap=  styled.div`
      height: 1.906rem;
      margin-top:.1rem;
      background:white;
      p{
         height:.37rem;
         color:#333;
         font-size:.14rem; 
         display: flex;
         align-items:center;
         span{
             padding-left:.12rem;
         }
         i{
             display:inline-block;
             width:.05rem;
             height:.36rem;
             background:#ffd000;
         }
      }
      ul{
         display: flex;
         flex-direction:row;
         flex-wrap:wrap;
          li {
         width:25%;
         text-align:center;
         border:1px solid #eee;
         height:.388rem;
         line-height:.388rem;
          }
        }
`
export const SpecialWrap=styled.div`
     height: 2.3858rem;
      margin-top:.1rem;
      background:white;
      p{
         height:.37rem;
         color:#333;
         font-size:.14rem; 
         display: flex;
         align-items:center;
         span{
             padding-left:.12rem;
         }
         i{
             display:inline-block;
             width:.05rem;
             height:.36rem;
             background:#9ed969;
         }
      }
      ul{
          display: flex;
          flex-direction:row;
          padding:.1rem;
          font-size:.12rem;
          li{
              width:50%;
              margin-right:.1rem;
              img{
                  width:100%;
                  height:1.0458rem;
              }
              h4{
                color:#333;
                white-space:nowrap;
                overflow:hidden;
                line-height:.2rem;
              }
              h5{
                white-space:nowrap;
                overflow:hidden; 
                color:#999999;
                font-weight:normal;
                line-height:.3rem;
              }
              h6{
                  display: flex;
                  justify-content:space-between;
                  font-size:.11rem;
                  color:#999999;
                  font-weight:normal;
                  i{
                    color: #f60;
                    font-size: 16px;
                    padding-right: .02rem;
                  }
              }
          }
      }
`
export const NavListWrap=styled.div`
       div:first-child{
           font-size:.16rem;
       }
       ul{
           display: flex;
           flex-direction:row;
           flex-wrap:wrap; 
            height:.906rem;
            padding:0 0 .15rem .15rem;
            color:#666;
           li{
               width:20%;                 
               height:.248rem;
               line-height:.248rem;          
               font-size:.12rem;
               text-align:center;
               border-radius: 12px;
               margin:.1rem .05rem 0 .1rem;
               background-color: #f9fafc;
               &.active{
                   color:white;
                   background:#1890ff;
               }
           }

       }
       div:last-child{
           ol{  
               margin-bottom:.6rem;
               li{
                   position: relative;
                   margin-top:.1rem;
           img{
               height:1.876rem;
               width:100%;
           }
           .img-top{
               position: absolute;
               top: .10rem;
              left: .15rem;
            background: rgba(0, 0, 0, 0.7);
            color: #fff;
            height: .24rem;
            line-height: .24rem;
            font-size: .12rem;
            border-radius: .12rem;
            padding: 0 .15rem;
           }
           .img-foot{
            position: absolute;
            left: .10rem;
            top: 1.4rem;
            width: .90rem;
            text-align: center;
            line-height: .30rem;
            font-size: .12rem;
            color: #fff;
            background-color: #f70;
            border-radius: .03rem;
            >span{
             font-size:.16rem;
            }
}

          .img-right{
              position: absolute;
              right:.1rem;
              top:.05rem;
            font-size: .12rem;
            color: #fffbc9;
            text-align: center;
            line-height:.3rem;
            padding:0 .1rem;
            height:.3rem;
            background: #f8434f;
            border-bottom-left-radius: .1rem;
          border-bottom-right-radius: .1rem;
          }
          >p{
            height: .32rem;
            line-height:.32rem;
            padding:0 .12rem;
            overflow: hidden;
            background: #fef9f4;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            color: #333;
           font-size: .12rem;
           >img{
            width:.2rem;
            height:.2rem;
           }
           >span{
               margin-left:.1rem;
           }
          }
           }
           .item-bottom{
               padding:.1rem .15rem;
               h5{
                   overflow:hidden;
                   font-size:.16rem;
                   color:#222;
                   text-overflow:ellipsis;
                   white-space:nowrap;

               }
               p{
                   overflow:hidden;
                   text-overflow:ellipsis;
                   white-space:nowrap;
                   font-size:.16rem;
                   color:#222; 
                   font-size:.12rem;
                   color:#999;
                   line-height:.2rem;
               }
               h6{   
                   overflow:hidden;
                   text-overflow:ellipsis;
                   white-space:nowrap;
                   font-size:.16rem;
                   color:#222;
                   font-size:.1rem;
                   color:#999;
                   line-height:.2rem;
                    height:.2rem;
                   >span{
                     width:.88rem;
                     overflow:hidden;
                    text-overflow:ellipsis;
                    white-space:nowrap;
                    border: solid 1px #ccc;
                    border-radius: 2px;
                    margin:.05rem .03rem 0 0;
                    
                   }
               }
           }
       }
       .empty{
           margin-bottom:3rem;
           display: flex;
           flex-direction:column;
           justify-content:center;
           text-align:center;
           p{
               color:.14rem;
               color:#666;
               padding-top:.1rem;
           }
       }
       }
       
       
`

